<template>
    <div class="search">
        <AppHeader to=".app-header" class="HomeNav SearchNav" left-arrow  back>
            <template #title>
                <van-search autofocus v-model="keyword" clearable placeholder="关键词" shape="round" @focus="$router.replace('/search')">
                </van-search>
            </template>
        </AppHeader>

        <div class="pro-list">
            <van-card 
                v-for="item,index in list"
                :key="index"
                :price="((item.originprice as number)*item.discount/10).toFixed(2)"
                :desc="item.desc"
                :title="item.proname"
                :thumb="item.img1"
                />
        </div>

    </div>
</template>

<script setup lang="ts">
    import type {ProNS}  from "@/@types/pro"
    import {ref,reactive,onMounted} from "vue";
    import {useRoute} from "vue-router";
    import {useSearchStore} from "@/stores/search"

    import {getSearchListAPI} from "@/api/pro";

    let keyword = ref<string>("");
    let route = useRoute(); //当前路由信息
    let searchStore = useSearchStore();

    let searchData = {
        count:1,
        limitNum:10,
        keyword:"",
    }


    let list = ref<ProNS.ProItem []>([]);

    let getSearchList = async():Promise<any> =>{
        try{
            let res= await getSearchListAPI(searchData);
            console.log("搜索数据",res);
            
            list.value = res.data;
        }catch(err){
            console.log(err);
        }

    }

    onMounted(()=>{
        // 把关键词 同步到搜索栏
        keyword.value = (route.query.keyword as string);
        searchData.keyword = (route.query.keyword as string);
        // 记录搜索的关键词  => localStorage

        searchStore.addWord(keyword.value);

        getSearchList();

    })



</script>

<style scoped>

</style>